<template>
	<view>
		<view class="m30">
			<view class="bgFff flex-jus radius30 p20 mb20" v-for="(item,index) in list" :key="index" @click.stop="nologinJump('/subpage/pet/detail?id='+item.id)">
				<view class="pet-image pore">
					<image :src="api_host + item.icon" mode="" class="img"></image>
					<image v-show="item.petSex == 1" src="../static/pet/boy.png"  mode="" class="sex"></image>
					<image v-show="item.petSex == 2" src="../static/pet/girl.png"  mode="" class="sex"></image>
				</view>
				<view class="ml30 flex1 flex-col flex-jus flex-start right-box">
					<view class="flex-jus width100">
						<text class="bold c343 f32">{{item.petName}}</text>
						<view @click.stop="nologinJump('/subpage/pet/addpet?id='+item.id)">
							<u-icon name="edit-pen-fill" color="#34314F" size="28"></u-icon>
						</view>
					</view>
					<view class="flex">
						<view class="mr10">
							<u-tag shape="circle" size="mini" color="#34314F" bgColor="#FFE5E5"
								:text="item.petVarietyLabel" borderColor="#FFE5E5"></u-tag>
						</view>
						<view class="mr10">
							<u-tag shape="circle" size="mini" color="#34314F" bgColor="#FFE5E5" :text="item.petAgeLabel"
								borderColor="#FFE5E5"></u-tag>
						</view>
						<view class="mr10">
							<u-tag shape="circle" size="mini" color="#34314F" bgColor="#FFE5E5"
								:text="item.petStatusLabel" borderColor="#FFE5E5"></u-tag>
						</view>
					</view>
				</view>	
			</view>	
		</view>
		<view class="fix-bot">
			<view class="ml30 mr30">
				<u-button color="#FFDE6D" :customStyle="{'color':'#34314F'}" shape="circle"
					@click="openUrl('/subpage/pet/addpet')">创建新档案</u-button>
			</view>
			<u-gap height="20"></u-gap>
		</view>
	</view>
</template>

<script>
	import {getmyPet} from '@/common/api_pet.js'
	export default {
		name:'',
		data() {
			return {
				list:[]
			}
		},
		onLoad(option) {
			if(option.form == 'index'){
				uni.navigateTo({
					url:'/subpage/pet/addpet'
				})
			}
		},
		onShow() {
			this.getmyPet()
		},
		methods: {
			async getmyPet() { //
				const res = await getmyPet()
				if (res.code == 200) {
					let { data } = res
					this.list = data
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFEEEE;
	}
	.pet-image{
		.img{
			width: 140rpx;
			height: 140rpx;
			border-radius: 50% 50% 50% 10rpx;
		}
		.sex{
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 0;
			bottom: 20rpx;
		}
	}
	.right-box{
		height: 140rpx;
	}
</style>
